﻿<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------
 
	Copyright (c) 2017-2018 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
	
------------------------------------------------------------>
	<title>ol-ext: Graticule control</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" href="../style.css" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!-- Openlayers -->
    <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
	<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
    <link rel="stylesheet" href="../../dist/ol-ext.css" />
	<script type="text/javascript" src="../../dist/ol-ext.js"></script>
	
	<!-- Proj4 -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
	
	<style>
		#map
		{	background: #fff;
			border:1px solid #000;
			padding:1em;
		}
		.ol-mouse-position 
		{	top: auto;
			bottom: 1em;
			left: 50%;
			right:auto;
			position: absolute;
			transform: translateX(-50%);
			background: rgba(255,255,255,0.5);
			font-size: 14px;
		}
	</style>
</head>
<body >
	<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

	<a href="../../index.html">
		<h1>ol-ext: Graticule control</h1>
	</a>
	<div class="info">
		The <i>ol.control.Graticule</i> show a graticule on the map.
		<ul>
			<li>
				TODO: fix border and text when rotating...
			</li>
			<li>
				TODO: handle wrapX
			</li>
			<li>
				TODO: remove artifacts on limits
			</li>
		</ul>
	</div>

	<!-- Map div -->
	<div id="map" style="width:600px; height:400px;"></div>

	<div class="options">
		<h2>Options:</h2>
		<ul>
			<li>

				Projection:
				<select id="grat" onchange="setGraticule(true)">
					<option value="4326">WGS 84 (EPSG:4326)</option>
					<option value="2154">Lambert-93 (France) EPSG:2154</option>
					<option value="27700">British National Grid (EPSG:27700)</option>
					<option value="54009">Mollweide (ESRI:54009)</option>
					<option value="23032">ED50 / UTM zone 32N (EPSG:23032)</option>
					<option value="2163">US National Atlas Equal Area (EPSG:2163)</option>
					<option value="3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
					<option value="5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
					<!--
						<option value="32662">Plate Carree</option>
					-->
				</select>
			</li>
			<li>
				<input id="line" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="line"> draw lines</label>
			</li>
			<li>
				<input id="border" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="border"> draw border</label>
			</li>
			<li>
				<input id="coords" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="coords"> show coords</label>
			</li>
			<li>
				Color:
				<select id="color" onchange="setGraticule(this.value)">
					<option value="black">black</option>
					<option value="red">red</option>
					<option value="green">green</option>
					<option value="blue">blue</option>
				</select>
			</li>
		</ul>
	</div>
	
	<script type="text/javascript">
		// Define proj4 projection
		proj4.defs("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
		proj4.defs("EPSG:27700","+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs");
		//proj4.defs("EPSG:32662","+proj=eqc +lat_ts=0 +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs");
		//proj4.defs("EPSG:54024","+proj=bonne +lon_0=0 +lat_1=60 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs ");
		proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
		proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs');
		proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel +towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
		proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
		proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 +a=6370997 +b=6370997 +units=m +no_defs');
		proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');

		// Define projection extent
		if (ol.proj.proj4 && ol.proj.proj4.register) ol.proj.proj4.register(proj4);
		ol.proj.get('EPSG:2154').setExtent([0, 6000000, 1250000, 7200000]);
		ol.proj.get('EPSG:27700').setExtent([0, 0, 800000, 1400000]);
		ol.proj.get('EPSG:5479').setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);
		ol.proj.get('EPSG:23032').setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]);
		ol.proj.get('EPSG:21781').setExtent([485071.54, 75346.36, 828515.78, 299941.84]);
		ol.proj.get('EPSG:3413').setExtent([-4194304, -4194304, 4194304, 4194304]);
		ol.proj.get('EPSG:2163').setExtent([/*-8040784.5135*/-4000000, -2577524.9210, 3668901.4484, /*4785105.1096*/4450000]);
		ol.proj.get('ESRI:54009').setExtent([-18e6, -9e6, 18e6, 9e6]);

		// The map
		var map = new ol.Map
			({	target: 'map',
				view: new ol.View
				({	zoom: 6,
					center: [-20094, 6234453]
				}),
				controls: ol.control.defaults({ "attribution": false }),
				layers: [new ol.layer.Tile(
					{	name: "OSM",
						source: new ol.source.OSM(),
						visible: true
					})]
			});

		var grat=
		{	'4326': new ol.control.Graticule({ step: 0.1, stepCoord: 5, margin:5, projection: 'EPSG:4326', formatCoord:function(c){ return c.toFixed(1)+"°" } }),
			//'32662': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:32662' }),
			'5479': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:5479' }),
			'23032': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:23032' }),
			'21781': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:21781' }),
			'3413': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:3413' }),
			'2163': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:2163' }),
			'54009': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'ESRI:54009' }),
			'2154': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:2154' }), 
			'27700': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:27700' })
		};

		var g;
		function setGraticule (proj)
		{	if (g) map.removeControl(g);
			g = grat[$("#grat").val()];
			var c = $("#color").val();
			var style = new ol.style.Style();
			if ($("#line").prop('checked')) style.setStroke (new ol.style.Stroke({ color:c, width:1 }));
			if ($("#border").prop('checked')) style.setFill (new ol.style.Fill({ color: $("#line").prop('checked') ? "#fff" : "#000" }));
			if ($("#coords").prop('checked')) style.setText (new ol.style.Text(
					{	stroke: new ol.style.Stroke({ color:"#fff", width:2 }),
						fill: new ol.style.Fill({ color:c }),
					}));
			g.setStyle(style);
			map.addControl(g);
			if (proj && ol.proj.get(g.get('projection')).getExtent())
			{	var ext = ol.proj.get(g.get('projection')).getExtent();
				ext = ol.proj.transformExtent (ext, g.get('projection'), map.getView().getProjection());
				map.getView().fit(ext, ol.proj.get(g.get('projection')).getExtent(), map.getSize());
				map.getView().setZoom(map.getView().getZoom()+1)
			}
		}
		setGraticule();

		/*
		var mousePositionControl = new ol.control.MousePosition(
		{	coordinateFormat: ol.coordinate.createStringXY(0),
			projection: 'EPSG:2154',
			undefinedHTML: '&nbsp;'
		});
		map.addControl (mousePositionControl);
		*/
		
	</script>

</body>
</html>